<template>
  <div id="tags">
    <div class="tag-head">
      <Icon type="md-pricetags" />
      <span > 标签</span>
    </div>
    <div class="tag-cloud">
      <a class="tag-item" v-for="(item, index) in tagList" 
        :key="item.id + '-' + index" 
        v-if="item.blogCount"
      >
        <router-link :to="'/tag/' + item.id"
          :style="{'color':item.color}"
          v-text="item.name">
        </router-link>
        <span :style="{'color':item.color}" v-text="item.blogCount"></span>
      </a>
    </div>
  </div>
</template>

<script>
import { initTag } from "utils/utils"

export default {
  name: 'Tags',
  computed: {
    tagList() {
      return this.$store.getters['blog/tags']
    }
  },
  mounted() {
    initTag()
  },
}
</script>

<style lang='scss' scoped>
#tags {
  box-shadow: 0 2px 9px rgba(31,45,61,.15);
  padding: 1rem 1.2rem;
  background: #fff;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  .tag-head {
    font-size: 18px;
  }
  .tag-cloud {
    padding-top: 0.5rem;
    a.tag-item {
      display: inline-block;
      padding: 0 0.1rem;
      span {
        display: none;
        margin-left: 10px;
      }
      &:nth-child(8n-7) {
        font-size: 20px;
      }
      &:nth-child(8n-6) {
        font-size: 17px;
      }
      &:nth-child(8n-5) {
        font-size: 18px;
      }
      &:nth-child(8n-4) {
        font-size: 20px;
      }
      &:nth-child(8n-3) {
        font-size: 16px;
      }
      &:nth-child(8n-2) {
        font-size: 18px;
      }
      &:nth-child(8n-1) {
        font-size: 19px;
      }
      &:nth-child(8n) {
        font-size: 17px;
      }
    }
  }
}
</style>